<template>
  <div :class="['tab', model]">
    <label :class="['tab__item', { 'active': active === index }]" v-for="(item, index) in items" :key="index" @click="change(index)">{{item}}</label>
  </div>
</template>

<script>
export default {
  name: 'tab',
  props: {
    items: {
      type: Array,
      default: function () {
        return []
      }
    },
    active: {
      type: Number,
      default: 0
    },
    model: {
      type: String,
      default: ''
    }
  },
  methods: {
    change (index) {
      this.$emit('change', index)
    }
  }
}
</script>

<style scoped lang="scss">
.tab {
  align-items: center;
  background-color: #fff;
  display: flex;
  height: 0.44rem;
  line-height: 0.44rem;
  text-align: center;

  &__item {
    color: #666;
    flex: 1;
    font-size: 0.16rem;
    font-weight: bold;
    height: 0.44rem;
    position: relative;

    &:first-child {
      &::before {
        display: none;
      }
    }

    &::before {
      background-color: #D8D8D8;
      content: '';
      height: 0.22rem;
      left: 0;
      position: absolute;
      top: 0.11rem;
      width: 0.01rem;
    }

    &.active {
      color: #FF8C2D;

      &::after {
        background-color: #FF8C2D;
        border-radius: 0.01rem;
        bottom: 0;
        content: '';
        height: 0.02rem;
        left: 50%;
        margin-left: -0.15rem;
        position: absolute;
        width: 0.3rem;
      }
    }
  }
}

.large {
  .tab {
    &__item {
      font-size: 0.18rem;

      &.active {
        &::after {
          border-radius: 0;
          height: 0.02rem;
          margin-left: -0.32rem;
          width: 0.64rem;
        }
      }
    }
  }
}
</style>
